import React, {useState} from 'react';
import {Avatar, Badge, Button, Form, Input, Modal, Space, Table, Tag} from 'antd';
import useAdminAllList from '@/hooks/getAdminAllList.js'


const Information = () => {
    // 管理员数据列表
    const {adminList} = useAdminAllList()
    // 点击显示对话框
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 拿到表单实例
    const [form] = Form.useForm();
    // 给编辑按钮绑定点击事件
    const onchange = (record) => {
        setIsModalOpen(true)
        form.setFieldsValue(record)
    }
    // 拿到token数据
    const {id} = JSON.parse(localStorage.getItem('admin'))

    // 定义表格列
    const columns = [
        {
            title: '管理员ID',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
            align: 'center',
        },
        {
            title: '管理员头像',
            dataIndex: 'imgPath',
            key: 'imgPath',
            render: (_, record) => (
                <>
                    <Badge
                        count={id === record.id ? <Tag color={"green"}>在线</Tag> : <Tag color={"default"}>离线</Tag>}>
                        <Avatar size={50} src={`http://127.0.0.1:3031${record.imgPath}`}/>
                    </Badge>
                </>
            ),
            align: 'center',
        },
        {
            title: '管理员名称',
            dataIndex: 'username',
            key: 'username',
            render: (_, record) => (
                <>
                    <Tag color={"blue"}>
                        {record.username}
                    </Tag>
                </>
            ),
            align: 'center',
        },
        {
            title: "创建时间",
            dataIndex: "createdAt",
            key: "createdAt",
            render: (_, record) => (
                <>
                    <Tag color={"default"}>
                        {record.createdAt}
                    </Tag>
                </>
            ),
            align: 'center',
        },
        {
            title: "修改时间",
            dataIndex: "updatedAt",
            key: "updatedAt",
            render: (_, record) => (
                <>
                    <Tag color={"default"}>
                        {record.updatedAt}
                    </Tag>
                </>
            ),
            align: 'center',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button type={"primary"} onClick={() => onchange(record)}>查看</Button>
                </Space>
            ),
        },
    ];
    return (
        <div>
            <Table
                columns={columns}
                rowKey={(record) => record.id}
                dataSource={adminList} pagination={{pageSize: 8}}
                scroll={{y: 500}}
                rowHoverable={true}
            />
            <Modal keyboard={true} cancelText={"取消"} okText={"确定"} title="查看管理员信息" open={isModalOpen}
                   onOk={() => {
                       setIsModalOpen(false)
                   }}
                   onCancel={() => {
                       setIsModalOpen(false);
                   }}>
                <div>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        style={{
                            width: 400,
                        }}
                        form={form}
                    >
                        <Form.Item
                            label={"ID"}
                            name="id"
                        >
                            <Input disabled={true}/>
                        </Form.Item>
                        <Form.Item
                            label="名称"
                            name="username">
                            <Input disabled={true}/>
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password">
                            <Input disabled={true}/>
                        </Form.Item>
                        <Form.Item
                            label="验证码"
                            name="identify">
                            <Input disabled={true}/>
                        </Form.Item>
                        <Form.Item
                            label="创建时间"
                            name="createdAt">
                            <Input disabled={true}/>
                        </Form.Item>
                    </Form>
                </div>
            </Modal>
        </div>
    );
}
export default Information;